<template>
	<div>
		<Card>
			<span>猜你喜欢</span>
		</Card>
		<ul>
			<li
				v-for="(item,index) in list"
				:key='index'
			>
				<h3>
					<img :src="item.imgUrl" alt="">
				</h3>
				<div class="goods-name">{{item.price}}</div>
				<div class="goods-price">
					<span>￥</span>
					<b>{{item.title}}</b>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import Card from '@/components/home/Card.vue'
	
	export default{
		props: {
			list: Array
		},
		components:{
			Card,
		},
	}
</script>

<style scoped lang="scss">
	ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		li{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 0 0.08rem;
			width: 10.666666rem;
			h3{
				img{
					width:10.666666rem;
					height:10.666666rem;
				}
			}
			.goods-name{
				width:10.666666rem;
				font-size: 0.373333rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.goods-price{
				width: 100%;
				text-align: left;
				span{
					font-size: 0.373333rem;
					color: red;
				}
				b{
					color: red;
					font-size: 0.373333rem;
				}
			}
		}
	}
</style>
